<template>
  <div>
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <h1>统一登录Demo</h1>
        <div class="user-info">
          <span>欢迎，{{ userStore.username || '用户' }}</span>
          <button class="btn btn-danger" @click="handleLogout">退出登录</button>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="container">
      <!-- 用户信息卡片 -->
      <div class="card">
        <h2>👤 用户信息</h2>
        <div class="user-details">
          <div class="detail-item">
            <span class="detail-label">用户名：</span>
            <span class="detail-value">{{ userStore.username }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">用户ID：</span>
            <span class="detail-value">{{ userStore.userId }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">登录状态：</span>
            <span class="detail-value status-online">已登录</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Token：</span>
            <span class="detail-value token">{{ tokenDisplay }}</span>
          </div>
        </div>
      </div>

      <!-- 功能测试卡片 -->
      <div class="card">
        <h2>🔒 受保护的数据访问</h2>
        <p class="description">点击下方按钮测试需要登录才能访问的接口</p>
        
        <button 
          class="btn btn-primary" 
          @click="fetchProtectedData"
          :disabled="loading"
        >
          {{ loading ? '请求中...' : '获取受保护的数据' }}
        </button>

        <div v-if="protectedData" class="success">
          <p><strong>✅ 请求成功！</strong></p>
          <pre>{{ protectedData }}</pre>
        </div>

        <div v-if="error" class="error">
          <p><strong>❌ 请求失败</strong></p>
          <p>{{ error }}</p>
        </div>
      </div>

      <!-- 应用信息卡片 -->
      <div class="card">
        <h2>ℹ️ 应用信息</h2>
        <div class="user-details">
          <div class="detail-item">
            <span class="detail-label">应用名称：</span>
            <span class="detail-value">{{ appName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">应用ID：</span>
            <span class="detail-value">{{ appId }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">登录中心：</span>
            <span class="detail-value">{{ loginUrl }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getProtectedData } from '@/api/auth'
import { UNIFIED_LOGIN_CONFIG } from '@/config'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const protectedData = ref(null)
const error = ref('')

const appName = UNIFIED_LOGIN_CONFIG.appName
const appId = UNIFIED_LOGIN_CONFIG.appId
const loginUrl = UNIFIED_LOGIN_CONFIG.loginUrl

// Token显示（只显示前20个字符）
const tokenDisplay = computed(() => {
  const token = userStore.token
  if (!token) return '未获取到Token'
  return token.length > 40 ? token.substring(0, 40) + '...' : token
})

// 获取受保护的数据
async function fetchProtectedData() {
  loading.value = true
  error.value = ''
  protectedData.value = null

  try {
    const response = await getProtectedData()
    if (response.code === 200) {
      protectedData.value = response.data
    }
  } catch (err) {
    error.value = err.message || '请求失败'
    console.error('[Home] 获取数据失败:', err)
  } finally {
    loading.value = false
  }
}

// 退出登录
function handleLogout() {
  if (confirm('确定要退出登录吗？')) {
    userStore.logout()
    
    // 跳转到登录页
    router.push('/login')
    
    console.log('[Home] 用户已退出登录')
  }
}
</script>

<style scoped>
.user-details {
  background: #fafafa;
  border-radius: 4px;
  padding: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 16px;
  line-height: 1.6;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #666;
  font-weight: 500;
  min-width: 100px;
}

.detail-value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

.detail-value.token {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.status-online {
  color: #52c41a;
  font-weight: 500;
}

.description {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
}

pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

